﻿<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        技师详情
    </title>
    <link rel='stylesheet' href='css/index.css'>
</head>

<body>
    <!--这里是页面动态加载个人信息部分-->
    <div class="page met-showproduct pagetype1 animsition">
        <div class="met-showproduct-body">
            <div class="container">
                <div class="row no-space">
                    <div class="col-md-9 product-content-body">
                        <div class="row">
                            <div class="panel product-detail">
                                <div class="panel-body">
                                    <ul class="nav nav-tabs nav-tabs-line met-showproduct-navtabs affix-nav">
                                        <li class="active">
                                            <a data-toggle="tab" href="#product-details" data-get="product-details">
                                                详细信息
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane met-editor lazyload clearfix animation-fade active"
                                            id="product-details">
                                            <div>
                                                <!-- 主图位置 -->
                                                <img id="techMainImg" alt="" style="width: 300px; height: 200px;"
                                                    src="picture/default-avatar.jpg" />
                                                <br />
                                                <div id="techName1" style="margin-left: 120px;"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--右侧开始-->
                    <div class="col-md-3">
                        <div class="row">
                            <div class="panel product-hot">
                                <div class="panel-body">
                                    <h2 class="margin-bottom-15 font-size-16 font-weight-300">
                                        扫码加微信
                                    </h2>
                                    <ul class="blocks-2 blocks-sm-3 mob-masonry" data-scale='1'>
                                        <li>
                                            <a href="detail.html" class="img" title="姓名">
                                                <!-- 右侧二维码图片位置 -->
                                                <img id="techQrCodeImg" data-original="picture/default.jpg"
                                                    class="cover-image" style='height:200px;' alt="二维码">
                                            </a>
                                            <a href="index.html" id="techName2" class="txt" title="姓名">
                                                姓名
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--右侧结束-->
                </div>
            </div>
        </div>
    </div>

    <style>
        /* 强制覆盖所有可能影响间距的样式 */
        #product-details>div {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 0 !important;
            /* 确保 flex 子项之间无间隙 */
        }

        #techMainImg {
            width: 301px !important;
            height: 450px !important;
            object-fit: cover !important;
            margin-bottom: 0 !important;
            /* 完全移除底部间距 */
            display: block !important;
        }

        #techName1 {
            margin: 0 0 0 120px !important;
            /* 简写：上右下左 */
            padding: 0 !important;
            font-size: 16px !important;
            line-height: 1 !important;
            /* 避免行高影响 */
            position: relative !important;
            top: -25px !important;
            /* 直接上移10px */
        }

        /* 微信图保持原始尺寸 */
        #techQrCodeImg {
            width: auto !important;
            height: auto !important;
            max-width: 100%;
            max-height: 200px;
            object-fit: contain;
        }
    </style>

    <script>
        //生产环境接口地址http://47.108.230.236:9001
        //本地环境接口地址http://127.0.0.1:9001/
        // 配置常量
        const CONFIG = {
            API_BASE_URL: 'http://47.108.230.236:9001',  // API基础地址
            UPLOAD_BASE_URL: 'http://47.108.230.236:9001/uploads/',  // 图片基础地址
            DEFAULT_AVATAR: 'picture/default-avatar.jpg',  // 默认头像
            DEFAULT_QR: 'picture/default.jpg'  // 默认二维码
        };

        /**
         * 智能图片加载器
         * @param {string} elementId - 图片元素ID
         * @param {string} filename - 图片文件名
         * @param {string} fallback - 备用图片路径
         */
        function loadImage(elementId, filename, fallback) {
            const img = document.getElementById(elementId);
            if (!img) return;

            // 空文件名处理
            if (!filename) {
                img.src = fallback;
                return;
            }

            // 构建完整图片URL（兼容已带路径的情况）
            const imageUrl = filename.startsWith('http')
                ? filename
                : `${CONFIG.UPLOAD_BASE_URL}${filename}`;

            // 预加载检测
            const tester = new Image();
            tester.onload = function () {
                img.src = imageUrl;

                // 特殊处理微信二维码尺寸
                if (elementId === 'techQrCodeImg') {
                    img.style.width = this.naturalWidth + 'px';
                    img.style.height = this.naturalHeight + 'px';
                }
            };
            tester.onerror = function () {
                console.warn(`图片加载失败: ${imageUrl}，使用备用图`);
                img.src = fallback;
            };
            tester.src = imageUrl;
        }

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function () {
            const img = document.getElementById('techMainImg');
            const text = document.getElementById('techName1');

            // 从URL获取技师ID
            const techId = new URLSearchParams(window.location.search).get('id');
            if (!techId) {
                console.error('未找到技师ID参数');
                return;
            }

            // 请求技师数据
            fetch(`${CONFIG.API_BASE_URL}/api/technicians/${techId}?_=${Date.now()}`)
                .then(response => {
                    if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
                    return response.json();
                })
                .then(data => {
                    if (data.code !== 200 || !data.data) {
                        throw new Error('无效的响应数据');
                    }

                    // 更新页面内容
                    const tech = data.data;
                    document.getElementById('techName1').textContent =
                        document.getElementById('techName2').textContent = tech.name || '未命名';

                    // 加载图片
                    loadImage('techMainImg', tech.mainImg, CONFIG.DEFAULT_AVATAR);
                    loadImage('techQrCodeImg', tech.listImg, CONFIG.DEFAULT_QR);
                })
                .catch(error => {
                    console.error('数据加载失败:', error);
                    // 显示备用图
                    loadImage('techMainImg', null, CONFIG.DEFAULT_AVATAR);
                    loadImage('techQrCodeImg', null, CONFIG.DEFAULT_QR);
                });
        });
    </script>

</body>
</html>